<template>
  <div class="swiper">
    <!-- <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, i) in dyp" :key="i">
          <img
            :src="require(`../assets/${item.img}`)"
            alt=""
            style="width:100%;height:200px;"
          />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div> -->
     <el-carousel indicator-position="outside">
    <el-carousel-item v-for="(item,i) in dyp" :key="i">
      <!-- <h3>{{ item }}</h3> -->
       <img
            :src="require(`../assets/${item.img}`)"
            alt=""
            style="width:100%;height:200px;"
          />
    </el-carousel-item>
  </el-carousel>
  </div>
</template>

<script>
import axios from "axios";
import {getswiper} from "@/api"
// import Swiper from "swiper";
// import "swiper/css/swiper.min.css";
export default {
  data() {
    return {
      dyp: [],
    };
  },
  mounted() {
    // this.getData();
    getswiper().then((res)=>{
       this.dyp = res.data;
    })
  },

  // methods: {
  //   getData() {
  //     axios({
  //       url: " http://192.168.225.45:3000/swiper",
  //     })
  //       .then((res) => {
  //         console.log(res, "aaa");
         
  //       })
  //       // .then(() => {
  //       //   var swiper = new Swiper(".swiper-container", {
  //       //     // spaceBetween: 30,
  //       //     pagination: {
  //       //       el: ".swiper-pagination",
  //       //       clickable: true,
  //       //     },
  //       //     loop: true,
  //       //     outplay:true,
  //       //   });
  //       // });
  //   },
  // },
};
</script>

<style>
 .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
.swiper  .el-carousel__container{
      height: 189px;
  }
 .swiper .el-carousel__item{
      height: 200px;
  }
</style>
